<template>
	<view class="content">
		<u-navbar :is-back="false" title=" " :background="{ background: '#ffffff'  }" :border-bottom="false"></u-navbar>
		<view class="header" @click="toMyCenter">
			<view class="header_left">
				<!-- <image mode="aspectFill" :src="userAvatar" /> -->
				<u-image mode="aspectFill"  width="100rpx" height="100rpx"  border-radius="10" :src="userAvatar">
					<u-loading slot="loading"></u-loading>
					<view slot="error" style="width: 100rpx;height: 100rpx;">
						<u-image v-if="vuex_userInfo!=null&&vuex_userInfo.sex==0" src="@/static/image/huge.jpg" width="100rpx" height="100rpx" border-radius="10" mode="aspectFill"></u-image>
						<u-image v-else src="@/static/image/girl.jpg" width="100rpx" height="100rpx" border-radius="10" mode="aspectFill"></u-image>
					</view>
				</u-image>
				<view class="header_left_content">
					<view class="header_left_content_name">{{vuex_userInfo.userName}}</view>
					<!-- 微信号: {{vuex_userInfo.chatNumber}} -->
					<view class="header_left_content_number u-line-1">账号: {{vuex_userInfo.mobile}}</view>
				</view>
			</view>
			<view class="header_right">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- <view  style="height: 10rpx;"></view> -->
		<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
		<u-cell-group>
			<u-cell-item @click="toPay()"  title="支付" :title-style="titleStyle"><u-icon size="32" slot="icon" name="fingerprint" color="#4cd964"></u-icon></u-cell-item>
		</u-cell-group>
		<!-- <view  style="height: 10rpx;"></view> -->
		<u-gap height="20" bg-color="#eee"  margin-top="1" margin-bottom="1"></u-gap>
		<u-cell-group>
			<u-cell-item v-for="(item, index) in groupList" :key="index" :title="item.title" :title-style="titleStyle" @click="toPage(index)">
				<u-icon slot="icon" size="32"  :name="item.icon" :color="item.color"></u-icon>
			</u-cell-item>
		</u-cell-group>
		<!-- <view  style="height: 10rpx;"></view> -->
		<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
		<u-cell-group>
			<u-cell-item  @click="setApp" title="设置" :title-style="titleStyle"><u-icon size="32" slot="icon" name="setting" color="#409eff"></u-icon></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			titleStyle:{
				fontSize:"32rpx",
				color:'#333',
				marginLeft: '10rpx'
			},
			userAvatar:'',
			groupList: [
				{ title: '收藏', color: '#409eff', icon: 'star' },
				{ title: '相册', color: '#409eff', icon: 'photo' },
				{ title: '卡包', color: '#409eff', icon: 'coupon' },
				{ title: '表情', color: '#ff9900', icon: 'heart' }
			],
		};
	},
	onShow:function(){
		let that=this;
		let avatar=  that.vuex_userInfo.avatar;
		 if(avatar!=null&&avatar!=undefined&&avatar.length>0){
			// console.log("avatar",avatar);
			 that.userAvatar=avatar
		 }else{
			 that.userAvatar="";
		 }
	},
	
	methods: {
		toPay:function(){
			this.globalUtil.utilAlert("功能正在开发,敬请期待~");
			return;
		},
		toPage:function(index){
			this.globalUtil.utilAlert("功能正在开发,敬请期待~");
			return;
		},
		
		setApp:function(){
			this.$u.route("/pages/my/set");
		},
		toMyCenter:function(){
			this.$u.route("/pages/my/myCenter");
		}
	}
};
</script>

<style lang="scss" scoped>
.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 38rpx;
		background-color: #ffffff;
		&_left{
			display: flex;
			align-items: center;
			&_content{
				padding-left: 20rpx;
				&_name{
					font-weight: bold;
				}
				&_number{
					color:#969799 ;
					font-size: 26rpx;
					max-width: 500rpx;
				}
			}
		}
		&_right{
			font-size: 28rpx;
			color: #969799;
		}
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 6rpx;
		}
	}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
</style>
